<%--
  Created by IntelliJ IDEA.
  User: 这是那头猪
  Date: 2022/5/17
  Time: 17:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <p>hello word</p>
    <%=request.getContextPath()%>
    <button>点击查询数据库</button>

    <script>
        window.onload=function () {
            document.querySelector("button").addEventListener("click",function () {
                alert("查询成功")
                //1. 创建XMLHttpRequest对象
                var http = new XMLHttpRequest();
                //2. 注册回调函数
                /**
                 * 当XMLHttpRequest对象的readyState属性发生变化时执行回调函数
                 *
                 * 保存 XMLHttpRequest 的状态。
                 *
                 * 0：请求未初始化
                 * 1：服务器连接已建立
                 * 2：请求已收到
                 * 3：正在处理请求
                 * 4：请求已完成且响应已就绪
                 * */
                http.onreadystatechange=function () {
                    if (http.readyState == 4 && http.status == 200){
                        //后端的数据this.responseText
                        document.querySelector("p").innerText=this.responseText
                    }
                }
                //3.打开连接通道，
                //可以在url后面传参，如果想要动态传参，用js代码获取id的value放在下面的url后面即可
                http.open("GET","<%=request.getContextPath()%>/text",true)
                //这里可以是POST，发POST请求
                //4. 发送请求
                http.send()
            })
        }
    </script>
</body>
</html>
